{extend name="common/base" /}
{block name="head"}
{__block__}
{load file="/static/dist/layui/css/layui.css" /}
{load file="/static/page/page.css" /}
{/block}
{block name="body"}

  <div class="layui-body">
    <div class='undercover-header' style="padding: 10px;">
      <blockquote class="layui-elem-quote">词库</blockquote>
      <div class="btn-box" style="text-align: right;">
        <button class="layui-btn layui-btn-sm add-btn">添加</button>
        <button class="layui-btn layui-btn-sm del-btn">删除</button>
      </div>
    </div>
    <table class="layui-table">
      <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th lay-data="{field:'',type:'checkbox',width:60,fixed: 'left'}"><input type="checkbox" class="checkboxall" name="check" lay-skin="primary" lay-filter="allChoose"></th>
          <th lay-data="{field:'id',width:100}">序号</th>
          <th lay-data="{field:'wordone'}">词语一</th>
          <th lay-data="{field:'wordtwo'}">词语二</th>
          <th lay-data = "{field:'opperate'}">操作</th>
        </tr>
      </thead>
      <tbody>
        {foreach name="list" item="vo"}
        <tr data-id="{$vo.id}">
          <td><input type="checkbox" name="check" lay-skin="primary"></td>
          <td>{$vo.id}</td>
          <td>{$vo.word}</td>
          <td>{$vo.word1}</td>
          <td><a href="" class="delItem">删除</a></td>
        </tr>
        {/foreach}
      </tbody>
    </table>
    {$page|raw}
  </div>

  {load file="/static/dist/layui/layui.js" /}

  <script>
    //JavaScript代码区域
    layui.use(['table', 'jquery'], function () {
      var table = layui.table,
              $ = layui.$;
              layer = layui.layer
      table.render({
        elem: '#undercover'
        , height: 600
        , limit: 15
        , page: true
      });
      $(".checkboxall").click(function () {
        if ($(this).prop('checked') == true) {
          $("input[name='check']").prop('checked', true);
        } else {
          $("input[name='check']").prop('checked', false);
        }
      });
      $('table tbody').on('click','input',function(){
        $('table tbody input').each(function(){
          if($(this).attr('checked')=='checked'){
            $(".checkboxall").prop('checked', false);
          }
        })
      })
      // 以回车符分割字符串
      function foo(str) {
        var temp = str.split(/[\n,]/g);
        console.log(temp);
        var arr = [];
        for (var i = 0; i < temp.length; i++) {
          var str = temp[i].replace(/(^\s*)|(\s*$)/g, "");
          arr.push(str.split(/\s+/));
        }
        return arr;
      }
      // 添加弹框
      var _htmlAdd='<form class="layui-form"><div class="layui-form-item">' +
        '<label class="layui-form-label" style="width:auto;">内容</label>' +
        '<div class="layui-input-block" style="margin-left:80px;">' +
          '<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>' +
        '</div>' +
      '</form>';
      // 添加
      $(".add-btn").click(function () {
        layer.open({
          title: '添加词语',
          area: ['380px', '300px'],
          content: _htmlAdd,
          btn:['确定','取消'],
          btnAlign:'c',
          btn1: function (index, type) {
            var desc=$('textarea[name="desc"]').val();
            console.log(desc);
            if(desc==''){
              alert('添加内容不能为空');
            }else{
              // 以回车间分割
              var arr=foo(desc);
              console.log(arr);
              $.ajax({
                type:'post',
                url:'add_undercover_word',
                data:{list:arr},
                dataType:'json',
                success:function(data){
                  console.log(data);
                  if(data.status==1){
                    console.log(data);
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function(){
                      window.location.reload();
                    },2000)
                  }else{
                    layer.msg(data.msg,{icon:5});
                  }
                },
                error:function(){
                  console.log('ajax请求失败');
                }
              })
            }
          }
        })
      })
      // 批量删除
      $(".del-btn").click(function () {
        var str='';
        $('tbody input[type=checkbox]:checked').each(function(){
          str+=$(this).parents('tr').attr('data-id')+',';
        })
        str=str.slice(0,str.length-1);
        console.log(str);
        if(str==''){
          alert('请选择批量删除的选项');
        }else{
          layer.confirm('确定要批量删除吗？',{
            title: '删除',
            btn:['确定','取消'],
            btn1: function (index, type) {
              console.log(str);
              $.ajax({
                type:'get',
                url:'del_undercover_word',
                data:{id_str:str},
                dataType:'json',
                success:function(data){
                  console.log(data);
                  if(data.status==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function(){
                      window.location.reload();
                    },2000)
                  }else{
                    layer.msg(data.msg,{icon:5});
                  }
                },
                error:function(){
                  console.log('ajax请求失败');
                }
              })
            }
          })
        }
      })
      // 单个删除
      $('table').on('click','.delItem',function(e){
        e.preventDefault();
        var that=$(this);
        var trId = that.parents('tr').attr('data-id');
        layer.confirm('确定要删除吗？',{
            title: '删除',
            btn:['确定','取消'],
            btn1: function (index, type) {
              console.log(trId);
              console.log(typeof trId);
              $.ajax({
                type:'get',
                url:'del_undercover_word',
                data:{id_str:trId},
                dataType:'json',
                success:function(data){
                  console.log(data);
                  if(data.status==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function(){
                      window.location.reload();
                    },2000)
                  }else{
                    layer.msg(data.msg,{icon:5});
                  }
                },
                error:function(){
                  console.log('ajax请求失败');
                }
              })
            }
          })
      })
    });
  </script>

{/block}
{block name="foot"}
{__block__}
{/block}
